<template>
  <view
    class="medal"
    :class="[
      size,
      {
        active: active,
      },
    ]"
    @click="showDialog = true"
  >
    <image
      v-if="showLogo"
      class="medal-img"
      :src="staticUrl('/static/images/widget/medal/2/' + index + '.png')"
    />
    <view
      v-if="showTitle"
      class="medal-text font-songti"
    >
      {{ showItem.name }}
    </view>

    <idialog
      :visible.sync="showDialog"
      mode="normal-big"
      title="成就勋章"
      @close="dialogClose"
    >
      <view class="medal-dialog">
        <view class="medal-dialog-img">
          <image :src="staticUrl('/static/images/widget/medal/2/' + index + '.png')" />
        </view>

        <view class="medal-dialog-title">
          {{ showItem.name }}
        </view>
        <view class="medal-dialog-info">
          <view>
            <view class="medal-dialog-text-desc mt-30"> 获得时间：{{ time || "未获得" }} </view>
            <view class="medal-dialog-text-desc"> 勋章条件：{{ showItem.desc }} </view>
            <view class="medal-dialog-text-level"> 稀有程度：{{ showItem.level }} </view>
          </view>
        </view>
      </view>
    </idialog>
  </view>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      index: {
        type: Number,
        default: 1,
      },
      active: {
        type: Boolean,
        default: false,
      },
      time: {
        type: String, // 获得时间
        default: "",
      },
      size: {
        type: String,
        default: "normal", // normal, small, mini
      },
      showTitle: {
        type: Boolean,
        default: true,
      },
      showLogo: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        lists: [
          { id: 1, name: "步入仙途", desc: "境界达到筑基期", level: "黄级" },
          { id: 2, name: "坚持不懈", desc: "累计修行7天", level: "黄级" },
          { id: 3, name: "水滴石穿", desc: "累计修行30天", level: "玄级" },
          { id: 4, name: "渐入佳境", desc: "境界达到元婴期", level: "玄级" },
          { id: 5, name: "运气之子", desc: "活的第一本天下级功法", level: "天级" },
          { id: 6, name: "天道酬勤", desc: "累计修行100天", level: "天级" },
        ],

        showDialog: false,
      };
    },
    computed: {
      showItem() {
        const index = Number(this.index) || 0;
        return this.lists[index] || {};
      },
    },
    watch: {
      visible(newValue) {
        this.showDialog = newValue;
      },
    },

    mounted() {
      this.showDialog = this.visible;
    },

    methods: {
      dialogClose() {
        this.showDialog = false;
        this.$emit("update:visible", false);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .medal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 178rpx;

    &-img {
      width: 178rpx;
      height: 169rpx;
      // 灰色
      filter: grayscale(100%);
      opacity: 0.8;
    }
    &.active {
      .medal-img {
        // 去除灰色
        filter: grayscale(0%);
        opacity: 1;
      }
    }

    &.small {
      width: 120rpx;
      .medal-img {
        width: 120rpx;
        height: 114rpx;
      }
    }

    &.mini {
      width: 80rpx;
      .medal-img {
        width: 80rpx;
        height: 76rpx;
      }
    }

    &-dialog {
      width: 570rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-img {
        width: 356rpx;
        height: 338rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      &-title {
        width: 100%;
        padding-bottom: 20rpx;
        text-align: center;
        font-family: "Songti SC";
        font-size: 36rpx;
        font-weight: 900;
        letter-spacing: 30rpx;
        border-bottom: 4rpx solid #a39283;
      }
    }
  }
</style>
